<template>
    <layout>
        <template #header>
            <div class="header-nav-bar">
                <div class="display-flex header-nav-bar-top">
                    <div class="header-search">
                        <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onRefresh">
                            <template #action>
                                <van-button round size="small" type="success" color="#ED1850"
                                @click="onRefresh">搜索</van-button>
                            </template>
                        </van-search>
                    </div>
                </div>
            </div>
            <dropdown-bar :menuList="dropdown.menuList" class="dropdown-bar" @change="changeDropdown" />
        </template>
        
        <divide-title />
        <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedText" @load="loadMore"
            class="van-list-box">
            <van-row justify="space-around" :gutter="[10, 10]">
                <ProductBox v-for="item in list" :key="item.id" :item="item" />
            </van-row>
        </van-list>
    </layout>
</template>

<script setup>
import { ref, reactive } from 'vue';
import layout from '@/components/Layout/index.vue'
import DropdownBar from '@/components/DropdownBar/index.vue'
import apis from '@/apis/ordergroup.js'
import DivideTitle from '@/components/DivideTitle/index.vue'
import ProductBox from '@/components/ProductBox/index.vue'
import { useRoute, useRouter} from 'vue-router'
const route=useRoute()
let page=ref(0)
let dropdown = reactive({
  menuList: [
    {text: '默认', value: 'all', checked: true, clickCount:0 },
    { text: '价格', value: 'price_asc', checked: false, clickCount: 0 },
    { text: '销量', value: 'buy_asc', checked: false, clickCount: 0 },
    { text: '新品', value: 'is_new', checked: false, clickCount: 0 },
  ],
})
let changeDropdown = (item) => {

    if (item.value == 'all') {
    dropdown.menuList.forEach(v => {
        v.checked = false;
        v.clickCount=0
        if (v.value == item.value) {
        v.checked = true;
        }
    })
    } else {
    dropdown.menuList.forEach(v => {
        if (v.value == 'all') {
        v.checked = false;
        }
        if (v.value == item.value) {
        v.clickCount++;
        v.checked = true;
        if (v.clickCount === 3) {
            v.clickCount = 0
            v.checked = false;
        }
        }
    })
    }
    page.value=1
    List()
}

const value = ref('');
let finishedText = ref('--END--');


const list = ref([])
let id=route.query.id
let List = async () => {
    if(page.value==1){
      list.value=[]
      finished.value=false
    }
    
    let params={
      buy_asc: "",
      is_new: "",
      keyword: value.value,
      page: page.value,
      price_asc: "",
      row: 10,
      type_id:id
    }

  dropdown.menuList.forEach((item) => {
    if (item.value !== 'all') {
      if (item.clickCount > 0) {
        params[item.value] = item.clickCount;
      }
    }
  });
    
    try{
     await apis.List(params).then((res)=>{
          if(res.code=='200'){
            list.value=list.value.concat(res.data.data)
          }else{
              showToast(res.msg);
          }
          loading.value = false; 
          if(page.value==res.data.last_page){
            finished.value=true
          }
        
          
      })
    }catch(e){
  
    }
    
  }
let loading = ref(false);
let finished = ref(false);
let timer=ref(null)
let loadMore = () => {
    console.log('222')
    if(timer.value){
    clearTimeout(timer.value)
    }
    timer.value=setTimeout(()=>{
        page.value++;
        List()
     
    
    },500)
  
}
let onRefresh=()=>{
    page.value=1
    List()
}

</script>

<style lang="scss" scoped>
.header-nav-bar {
    height: 230px;
    background: linear-gradient(to right, var(--orange-color), var(--red-color));
    color: var(--white);

    :deep(.van-nav-bar__title) {
        color: var(--white);
    }

    ;

    :deep(.van-nav-bar) {
        background-color: transparent;
    }

    :deep(.van-notice-bar) {
        background-color: transparent;
    }

    :deep(.van-nav-bar .van-icon) {
        color: var(--white);
    }
}

.header-nav-bar-top {
    padding: 20px;
    margin-top: 20px;
}

.header-left {
    width: 95px;
    height: 80px;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-right {
    width: 58px;
    height: 80px;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;

}

.header-search {
    border-radius: 60px;
    background-color: var(--white);
    flex: 1;
    overflow: hidden;
    height: 80px;
    margin: 0 20px;

    :deep(.van-search) {
        background-color: transparent;
        height: 80px;
    }

    :deep(.van-search__content) {
        background: var(--white);
    }

    :deep(.van-button) {
        width: 140px;
        margin-top: -4px;
    }

    :deep(.van-search__action) {
        background: var(--white);
    }
}
.dropdown-bar{margin: -40px 20px 20px 20px;border-radius: 5px;overflow: hidden;}
.product-navigation {
    border-radius: 10px;overflow: hidden;
}
.van-list-box {
    margin-top: 20px;
}
</style>